<template>
  <div class="docs-container">
    <div class="docs-header">
      <img :src="require('@/assets/images/sub_logo.png')" class="sidebar-logo">
      <span class="docs-header-title"> {{ defaultSettings.title }}</span>
    </div>
    <div class="docs-main-container">
      <div class="docs-siderbar">
        <el-select v-model="categoryId" placeholder="请选择" style="margin-bottom:10px">
          <el-option
            v-for="item in firstCategories"
            :key="item.id"
            :label="item.name"
            :value="item.id" />
        </el-select>
        <el-input v-model="keyword" placeholder="请输入搜索关键字" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" />
        </el-input>
        <el-tree
          ref="menuTree"
          class="common-el-tree"
          :expand-on-click-node="false"
          :data="docsMenuData"
          node-key="id"
          :props="defaultProps"
          :filter-node-method="onTreeFilter"
          @node-click="handleNodeClick" />
      </div>
      <div class="docs-layout-main">
        <transition name="fade-transform" mode="out-in">
          <router-view />
        </transition>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  data: function() {
    return {
      keyword: '',
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      firstCategories: [],
      categoryId: '',
      docsMenuData: []
    }
  },
  watch: {
    categoryId: function(val) {
      this.fetchData()
    },
    keyword(val) {
      this.$refs.menuTree.filter(val)
    },
    $route: {
      handler(val, oldval) {
        if (val.query.id && val.query.content) {
          this.$refs.menuTree.setCheckedKeys([val.query.id])
        }
      },
      // 深度观察监听
      deep: true
    }
  },
  created() {
    this.fetchFirstCategory()
  },
  methods: {
    onTreeFilter(value, data) {
      if (!value) return true
      return data[this.defaultProps.filter] ? data[this.defaultProps.label].indexOf(value) !== -1 || data[this.defaultProps.filter].indexOf(value.toUpperCase()) !== -1 : data[this.defaultProps.label].indexOf(value) !== -1
    },
    fetchFirstCategory() {
      this.$store.dispatch('upmsCategoryDictListByTypeAndPid', { type: '01', pid: '0' }).then((res) => {
        this.firstCategories = res
        if (res.length > 0) {
          this.categoryId = res[0].id
        }
      }).catch((_) => {})
    },
    fetchData() {
      this.docsMenuData = []
      this.$store.dispatch('contentUnionAllCategoryByPid', this.categoryId).then((res) => {
        this.docsMenuData = res
        if (res.length > 0) {
          this.$router.push({ path: '/helpDocs/index', query: { title: res[0].title, content: res[0].content, id: res[0].id }})
        }
      }).catch((_) => {})
    },
    handleNodeClick(node) {
      this.$router.push({ path: '/helpDocs/index', query: { title: node.title, content: node.content, id: node.id }})
    }
  }
}
</script>
<style lang="scss" scoped>
  .docs-container{
    min-height: 768px;
    min-width: 1000px;
    .docs-header{
      display: -webkit-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      width: 100%;
      line-height: 50px;
      padding: 0px 10px 0px 0px;
      background: #1890FF;
      z-index: 2000;
      color: #fff;
      img{
          height: 40px;
          padding: 0px 10px;
      }
      .docs-header-title{
          font-size: 1.35em;
          flex: 1;
      }
    }
    .docs-main-container{
      height: calc(100vh - 50px);
      display: flex;
      flex-direction: cell;
      background: #fff;
      .docs-siderbar{
        width: 208px;
        padding: 10px
      }
      .docs-layout-main{
        flex: 1;
        border-left: 1px solid #F4F5F9;
        .docs-content-container{
          height: 100%;
          display: flex;
          flex-direction: column;
        }
      }
    }
  }
</style>
